<template>
 <div class="big">
    <div class="hed">
    <h2>新型冠状病毒实时监测</h2>
  </div>
   <div class="boss">
    <left class="left"></left>
    <center class="center">
    </center>
     <right class="right"></right>
 </div>
 </div>
</template>

<script>
import left from '../components/left.vue'
import right from '../components/right.vue'
import center from '../components/center.vue'
export default {
  data () {
    return {

    }
  },
  methods: {

  },
  created () {

  },
  mounted () {

  },
  components: {
    left,
    right,
    center
  },
  computed: {

  },
  watch: {

  },
}
</script>

<style lang='scss' scoped>
// CSS 里的 no-repeat是针对背景图来说的。当你设置了no-repeat这个属性后，你的背景图将不会被重复，再换一种说法，
// 你在网站上所看见的背景图就是你所增加的图， 不会出现平铺或重复的现象。

// 当然你仍然可以通过其他方式来 控制图 的位置，例如： {backgroud:top, center, no-repeat;} 这样你的背景图就位于上部的居中位置。
.boss{
  margin-top: 10px;
  // display: flex;
  width: 100vw;
  height: 94vh;
  display: flex;
  box-sizing: border-box;
  // justify-content: space-between;
}
.left{
  // flex: 2;
  width: 30vw;
  height: 94vh;
  // background-color: aqua;
}
.right{
  // flex: 2;
  width: 30vw;
   height: 94vh;
  // background-color: palegreen;
}
.center{
  // flex: 3;
  width: 40vw;
   height: 94vh;
  // background-color: blue;
}
.hed{
  width: 100%;
  height: 6vh;
  line-height: 6vh;
  text-align: center;
  background: url('../../public/head_bg.eeff3da5.png')no-repeat; 
  color: #fff;
}
.big{
    width: 100vw;
  height: 100vh;
  background: url('../../public/bg.a6333996.jpg')no-repeat; 
  background-size: 100%,100%;
}
</style>
